<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="800px"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    :append-to-body="true"
    :before-close="handleClose"
  >
    <el-form ref="groupEdit" :model="group" :rules="rules" label-width="120px">
      <el-form-item label="组名" prop="GroupName">
        <el-input
          v-model="group.GroupName"
          :maxlength="50"
          placeholder="组名"
          :clearable="true"
        />
      </el-form-item>
      <el-form-item label="父级组" prop="ParentId">
        <el-cascader
          v-model="group.ParentId"
          placeholder="所属父级"
          :clearable="true"
          :props="{
            emitPath: false,
            label: 'Name',
            value: 'Id',
            children: 'Children'
          }"
          :options="groups"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" style="text-align: center">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="reset">重置</el-button>
    </div>
  </el-dialog>
</template>

<script>
import * as groupApi from '@/customForm/api/phyQueryGroup'
export default {
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    columns: {
      type: Array,
      default: () => []
    },
    formId: {
      type: String,
      default: null
    },
    tableId: {
      type: String,
      default: null
    },
    id: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      title: '新增表单组',
      group: {},
      groups: [],
      rules: {
        GroupName: [
          {
            required: true,
            message: '组名不能为空！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    initColumns(groups, data) {
      if (groups == null || groups.length === 0) {
        return
      }
      groups.forEach(a => {
        if (a.IsGroup) {
          const g = {
            Id: a.Id,
            Name: a.Label,
            disabled: a.Id === this.id,
            Children: null
          }
          this.initColumns(a.Children, g)
          data.Children.push(g)
        }
      })
    },
    async reset() {
      const list = []
      this.columns.forEach(a => {
        if (a.IsGroup) {
          const g = {
            Id: a.Id,
            Name: a.Label,
            disabled: a.Id === this.id,
            Children: null
          }
          this.initColumns(a.Children, g)
          list.push(g)
        }
      })
      this.groups = list
      console.log(list)
      if (this.id == null) {
        this.title = '添加表单组'
        this.group = {
          GroupName: null,
          ParentId: null
        }
      } else {
        const res = await groupApi.Get(this.id)
        this.title = '编辑表单组：' + res.GroupName
        this.group = res
      }
    },
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('close', false)
    },
    async set() {
      const isSet = await groupApi.Set(this.id, this.group)
      this.$message({
        type: 'success',
        message: '修改成功!'
      })
      this.$emit('update:visible', false)
      this.$emit('close', isSet, this.id)
    },
    async add() {
      this.group.FormId = this.formId
      this.group.TableId = this.tableId
      const id = await groupApi.Add(this.group)
      this.$message({
        type: 'success',
        message: '添加成功!'
      })
      this.$emit('update:visible', false)
      this.$emit('close', true, id)
    },
    save() {
      this.$refs['groupEdit'].validate((valid) => {
        if (valid) {
          if (this.id == null) {
            this.add()
          } else {
            this.set()
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
.el-table tr {
  line-height: 40px;
}
</style>
